
window.App = {
		
	get : function(url) {
		var data = "<h1> failed to load url : " + url + "</h1>";
		$.ajax({
			async: false,
			url: url,
			success: function(response) {
				data = response;
			}
		});
		return data;
	}

}


App.Company = Backbone.Model.extend({
	urlRoot : "api/company",
	defaults : {
		id: null,
		name: "please insert company name",
		address: "please insert company address",
		password: "please insert user password",
	}
});


App.CompanyCollection = Backbone.Collection.extend({
	url : "api/company",
	model : App.Company
});


App.User = Backbone.Model.extend({
	urlRoot : "api/user",
	defaults : {
		id: null,
		name: "please insert user name",
		email: "please insert user email",
		password: "please insert user password",
	}
});


App.UserCollection = Backbone.Collection.extend({
    url : "api/user",
	model : App.User
});


App.ChromeView = Backbone.View.extend({
	initialize: function () {},
	template: _.template( App.get("tpl/chrome.html") ),
	render: function () {
		var view = this;
		$.ajax({
			"type":"POST",
			"url" : "api/login"
		}).error(function(response){
			App.user = null;
			$(view.el).html(view.template());
			Backbone.history.loadUrl( Backbone.history.fragment , { trigger: true } );
		}).done(function(response){
			App.user = response;
			$(view.el).html(view.template());
			Backbone.history.loadUrl( Backbone.history.fragment , { trigger: true } );
		});
		return this;
	},
    events: {
		"click button.login" : "doLogin",
		"click button.logout" : "doLogout"
    },
    doLogin : function() {
		var view = this;
		$.ajax({
			"type":"POST",
			"url" : "api/login",
			"data":{
				"email"		:	$("#email").val(),
				"password"	:	$("#password").val()
			}
		}).error(function(response){
			App.user = null;
			$(view.el).html(view.template());
			Backbone.history.loadUrl( Backbone.history.fragment , { trigger: true } );
		}).done(function(response){
			App.user = response;
			$(view.el).html(view.template());
			Backbone.history.loadUrl( Backbone.history.fragment , { trigger: true } );
		});
    },
    doLogout : function() {
		var view = this;
		$.ajax({
			"type":"POST",
			"url" : "api/logout"
		}).always(function(response){
			App.user = response;
			$(view.el).html(view.template());
			Backbone.history.loadUrl( Backbone.history.fragment , { trigger: true } );
		});
    },
});


App.HomeView = Backbone.View.extend({
	template: _.template( App.get("tpl/home.html") ),
	render: function () {
		$(this.el).html(this.template());
		return this;
	},
});


App.UserListView = Backbone.View.extend({
	template: _.template( App.get("tpl/userList.html") ),
	initialize: function () {
		_.bindAll(this, 'render', 'appendItem');
	},
	render: function () {
		$(this.el).html(this.template());
        _.each(this.collection.models, this.appendItem, this);
		return this;
	},
    appendItem: function (user) {
    	var userListItemView = new App.UserListItemView({
    		model : user,
		});
    	$(this.el).append( userListItemView.render().el );
    },
});


App.UserListItemView = Backbone.View.extend({
	tagName:"div",
	template: _.template( App.get("tpl/userListItem.html") ),
	initialize: function () {
		_.bindAll(this, 'render', 'unrender', 'remove');
		this.model.bind('remove', this.unrender);
	},
	render:function () {
		$(this.el).html(this.template(this.model.toJSON()));
		return this;
	},
	unrender: function(){
		$(this.el).remove();
	},
	remove: function(e) {
		this.model.destroy();
	},
});


App.CompanyView = Backbone.View.extend({
	template: _.template( App.get("tpl/company.html") ),
	render: function () {
		$(this.el).html(this.template());
		this.getUsers(1);
		return this;
	},
	getUsers : function(companyId) {
		var userCollection = new App.UserCollection();
		userCollection.fetch({
			data : {
				companyId : companyId
			},
			success : function( users ) {
				var userListView = new App.UserListView({el : $('#users'), collection : userCollection });
				userListView.render();
			}
		});
	}
});


App.AboutView = Backbone.View.extend({
	template: _.template( App.get("tpl/about.html") ),
	render: function () {
		$(this.el).html(this.template());
		return this;
	},
});


App.Router = Backbone.Router.extend({
	
	routes : {
		"home"		: "home",
		"company"	: "company",
		"about"		: "about",
	},

	initialize: function () {
		App.chromeView = new App.ChromeView({ el : document.body });
		App.chromeView.render();
	},

	home: function () {
		App.homeView = new App.HomeView({el : $('#chromeViewContent') });
		App.homeView.render();
	},

	company: function () {
		App.companyView = new App.CompanyView({el : $('#chromeViewContent') });
		App.companyView.render();
	},

	about: function () {
		App.aboutView = new App.AboutView({el : $('#chromeViewContent') });
		App.aboutView.render();
	},
	
});


$(function() {
	App.router = new App.Router;
	Backbone.history.start();
});


